<template>
  <div class="margin-top-40">
      <h3>{{imgInfo.title}}</h3>
    <div><span>{{imgInfo.add_time}}</span><span>点击数：{{imgInfo.click}}</span></div>

    <div class="mui-content">
		        <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li v-for="(item,index) in imgArr" :key="index" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		                <img class="preview-img" @click="$preview.open(index, imgArr)" :src="item.src"></img>
                    </li>
		        </ul> 
		</div>

    <p v-html="imgInfo.content"></p>
    <comment :commentId='$route.params.photoId'></comment>
  </div>
</template>

<style>
.mui-content img{
    height: 100%;
    width: 100%;
}
</style>

<script>
    import comment from '../comment/comment.vue'
    import common from '../../static/common/common.js'
    export default{
        data(){
            return {
                imgInfo:{},
                imgArr:[]
            }
        },
        created(){
            this.getImgInfo()
        },
        methods:{
            getImgInfo(){
                const url = common.baseUrl+'api/getimageInfo/'+this.$route.params.photoId
                this.$http.get(url).then(res=>{
                    res = res.body.message[0]
                    this.imgInfo = res;
                    this.getImgArr(res.id)
                })
            },
            getImgArr(id){
                const url = common.baseUrl+'api/getthumimages/'+id
                this.$http.get(url).then(res=>{
                    this.imgArr = res.body.message
                    this.imgArr.forEach(v => {
                     v.w=600
                     v.h=400                        
                    });
                    console.log('hhh:',this.imgArr);
                })
            }
        },
        components:{
            comment
        }
    }
</script>